<script setup lang="ts">
import SCButton from "../src/components/Button/ScButton.vue"
import {ref} from "vue";
import ScCollapse from './components/Collapse/ScCollapse.vue';
import ScCollapseItem from './components/Collapse/ScCollapseItem.vue';
import type{collapseItemNameTypes} from "./components/Collapse/types";
import ScAlert from "./components/Alert/ScAlert.vue";
import type{tooltipExpose} from './components/Tooltip/types';
// tooltip组件
import ScTooltip from "./components/Tooltip/ScTooltip.vue";
import type{Options} from "@popperjs/core"
import type{emitsArgu} from "./components/Button/types"

const activeItems = ref<collapseItemNameTypes[]>(['001']);
const ScTooltip1 = ref<tooltipExpose>();
const popperOptions:Partial<Options> = {
  placement:'right-end',
  strategy:'fixed'
};

// 测试按钮点击回调
function clickFun(obj:emitsArgu) {
  console.log("触发了",obj.$event.currentTarget);
}

</script>
<template>
  <div>
    <div>
      <!-- fa-solid fa-circle-check -->
      <ScAlert type='success' :closeable="true" iconName="fa-solid fa-circle-check"  effect='light' content="这是一条成功提示"></ScAlert>
      <!-- fa-solid fa-circle-exclamation -->
      <ScAlert type='warning' :closeable="true" iconName="fa-solid fa-circle-exclamation"  effect='light' content="这是一条警告提示"></ScAlert>
      <!-- fa-solid fa-circle-xmark -->
      <ScAlert type='danger' :closeable="true" iconName="fa-solid fa-circle-xmark"  effect='light' content="这是一条错误提示"></ScAlert>
      <!-- fa-solid fa-bell -->
      <ScAlert type='primary' :closeable="true" iconName="fa-solid fa-bell"  effect='light' content="这是一条消息提示"></ScAlert>
      <!-- fa-solid fa-circle-info -->
      <ScAlert type='info' :closeable="true" iconName="fa-solid fa-circle-info"  effect='light' content="这是一条普通提示"></ScAlert>

    </div>
    <div>
      <SCButton type="success" @clickEmits="clickFun" ref="ScButtonRef" icon="fa-solid fa-circle-check">成功按钮</SCButton>
      <SCButton type="warning" @clickEmits="clickFun" ref="ScButtonRef" icon="fa-solid fa-circle-exclamation">警告按钮</SCButton>
      <SCButton type="danger" @clickEmits="clickFun" ref="ScButtonRef" icon="fa-solid fa-circle-xmark">错误按钮</SCButton>
      <SCButton type="primary" @clickEmits="clickFun" ref="ScButtonRef" icon="fa-solid fa-bell">重要按钮</SCButton>
      <SCButton type="info" @clickEmits="clickFun" ref="ScButtonRef" icon="fa-solid fa-circle-info">消息按钮</SCButton>
    </div>
    <div>
      <ScCollapse v-model:activeNames="activeItems" accordion>
        <ScCollapseItem name="001">
          <template #collapseItemHeader>
            <h2>标题一</h2>
          </template>
          <template #collapseItemBody>
            <p>内容一</p>
          </template>
        </ScCollapseItem>
        <ScCollapseItem name="002">
          <template #collapseItemHeader>
            <h2>标题二</h2>
          </template>
          <template #collapseItemBody>
            <p>内容二</p>
          </template>
        </ScCollapseItem>
        <ScCollapseItem name="003">
          <template #collapseItemHeader>
            <h2>标题三</h2>
          </template>
          <template #collapseItemBody>
            <p>内容三</p>
          </template>
        </ScCollapseItem>
        <ScCollapseItem name="004" disabled>
          <template #collapseItemHeader>
            <h2>标题四</h2>
          </template>
          <template #collapseItemBody>
            <p>内容四</p>
          </template>
        </ScCollapseItem>

      </ScCollapse>
    </div>
    <div>
      <SCButton  @clickEmits="ScTooltip1?.show()">测试1</SCButton>
      <SCButton @clickEmits="ScTooltip1?.hide()">测试2</SCButton>

      <ScTooltip :popperOptions="popperOptions"  triggerType="hover"  ref="ScTooltip1" @visible-change="(value,msg) =>{console.log('msg',value);console.log('msg',msg)}">
        <template #trigger>
          <div style="width: 100px;height: 50px;background-color: deepskyblue;"></div>
        </template>
        <template #display>
          <div style="width: 50px;height: 30px;background-color: darkgrey;"></div>
        </template>
      </ScTooltip>
    </div>

  </div>
</template>

<style scoped>
</style>
